<template>
  <div>
    <van-nav-bar title="按章节练习" />
    <div class="container">
      <div
        class="item"
        v-for="item in chapterList"
        :key="item.returnName"
        @click="go(item)"
      >
        <div>
          <span>{{ item.showName }}</span>
        </div>
      </div>
    </div>
  </div>

  <div style="height: 5rem"></div>
</template>
  
  <script>
export default {
  data() {
    return {
      getAllChapterInfoQueryInfo: {
        methodName: "exerciseByChapter_getAllChapterInfo",
        data: "",
      },
      chapterList: [],
    };
  },
  created() {
    this.getAllChapterInfo();
  },
  methods: {
    async getAllChapterInfo() {
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.getAllChapterInfoQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      console.log(JSON.parse(res.data));
      this.chapterList = JSON.parse(res.data).chapterInfo;
    },
    // 路由跳转函数
    go(item) {
      this.$router.push({
        path: "/practicing",
        query: { title: item.showName, returnName: item.returnName },
      });
    },
  },
};
</script>
  
  <style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item {
  width: 600px;
  height: 100px;
  background-color: #ead7c6;
  border-radius: 10px;
  box-shadow: 0 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>